<!-- 提现 -->
<template>
	<view class="draw-money-wrap">
		<!-- 提现输入卡片-->
		<view class="draw-card">
			<view class="bank-box u-flex u-col-center u-row-between u-m-b-30">
				<view class="card-title">提现至</view>
				<view class="bank-list u-flex">
					<text class="card-title">微信零钱</text>
				</view>
			</view>
		
			<view class="card-title">提现金额</view>
			<view class="input-box u-flex u-col-center">
				<view clsss="unit">￥</view>
				<input class="u-flex-1 u-p-l-10" type="number" @input="onWithdrawInput" v-model="money"
					:placeholder-style="placeholderStyle" placeholder="请输入提现金额" />
			</view>
			<view class="withdraw-tip">
				<text>最多可提现金额：¥ 128</text>
				<text>全部提现</text>
			</view>
			
			<view class="button">
				提现
			</view>
			
		</view>	
		<!-- modal -->
		<u-modal ref="uModal" v-model="showModal" :show-cancel-button="true" confirm-color="#7063D2"
			cancel-color="#666666" @confirm="$Router.push('/pages/user/wallet/withdraw-log')" confirm-text="查看记录"
			cancel-text="继续提现" content="您的申请提现已提交" title="申请成功"></u-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex';
	import FormValidate from '@/shopro/validate/form';
	import wechat from '@/shopro/wechat/wechat';
	export default {
		components: {},
		data() {
			return {
				showModal: false,
				money: '', //提现金额
				ruleInfo: '', //提现规则
				formTitle: '',
				withdrawType: '',
				showBindForm: false,
				selectedWithdrawType: '',
				withdrawInfo: {}, //提现信息
				showWithdrawList: false,
				withdrawList: {
					bank: {
						icon: this.$IMG_URL + '/imgs/wallet/bank_type.png',
						title: '银行卡转账',
						value: 'bank'
					},
					wechat: {
						icon: this.$IMG_URL + '/imgs/wallet/wx_type.png',
						title: '微信零钱',
						value: 'wechat'
					},
					alipay: {
						icon: this.$IMG_URL + '/imgs/wallet/ali_type.png',
						title: '支付宝账户',
						value: 'alipay'
					}
				},
				// 表单样式
				errorType: ['message'],
				labelStyle: {
					'font-size': '30rpx',
					'font-weight': '500',
					color: '#333'
				},
				placeholderStyle: 'font-size: 30rpx; font-weight: 500;color:#C2C7CF;',
				form: {
					data: {
						real_name: '',
						bank_name: '',
						card_no: ''
					},
					bankRules: {
						real_name: FormValidate.realName,
						bank_name: FormValidate.bankName,
						card_no: FormValidate.bankCode
					},
					alipayRules: {
						real_name: FormValidate.realName,
						card_no: FormValidate.alipayAccount
					}
				}
			};
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		async onLoad() {
			this.getWithdrawRules();
		},
		methods: {
			// 确认提现方式
			onSaveWithdrawType() {
				this.withdrawType = this.selectedWithdrawType;
				this.showWithdrawList = false;
				this.getWithdrawInfo();
			},
			async bindThirdOauth() {
				let that = this;
				wechat.bind();
				that.getWithdrawInfo();
			},
			// 提现检验
			onWithdrawInput(e) {
				let sVal = String(e.detail.value);
				sVal = sVal.replace(/\b(0+)/gi, '');
				sVal = sVal.replace(/[^\d]/g, '');
				this.money = sVal;
			},
			// 提现
			withdraw() {
				const that = this;
				if (!this.withdrawType) {
					this.$u.toast('请选择提现方式');
					return;
				}
				if (this.money <= 0) {
					this.$u.toast('请输入提现金额');
					return;
				}
				that.$http(
					'money.walletApply', {
						type: that.withdrawType,
						money: that.money
					},
					'申请中...',
					false
				).then(res => {
					if (res.code === 1) {
						that.money = '';
						that.showModal = true;
						//  #ifdef MP-WEIXIN
						this.$store.commit('subscribeMessage', 'wallet');
						//  #endif
						that.$store.dispatch('getUserInfo');
					} else {
						that.$u.toast(res.msg);
					}
				});
			},
			initForm() {
				this.form.data = {
					real_name: '',
					bank_name: '',
					card_no: ''
				};
			},

			// 绑定,修改
			toBind() {
				this.showBindForm = true;
				this.form.data = {
					...this.form.data,
					...this.withdrawInfo
				};
				switch (this.withdrawType) {
					case 'bank':
						this.formTitle = this.withdrawInfo ? '修改银行卡' : '添加银行卡';
						this.$nextTick(() => {
							this.$refs.bank.setRules(this.form.bankRules);
						});
						break;
					case 'alipay':
						this.formTitle = this.withdrawInfo ? '修改支付宝' : '添加支付宝';
						this.$nextTick(() => {
							this.$refs.alipay.setRules(this.form.alipayRules);
						});
						break;
					default:
						break;
				}
			},
			// 确认提交表单
			saveForm() {
				let that = this;
				this.$refs[this.withdrawType].validate().then(res => {
					if (res) {
						that.$http(
							'money.bankEdit', {
								type: that.withdrawType,
								...that.form.data
							},
							'提交中...'
						).then(res => {
							if (res.code === 1) {
								that.showBindForm = false;
								that.$u.toast(res.msg);
								that.initForm();
								that.getWithdrawInfo();
							}
						});
					}
				});
			},
			// 提现规则
			getWithdrawRules() {
				let that = this;
				that.$http('money.walletRule').then(res => {
					if (res.code === 1) {
						that.ruleInfo = res.data;
						that.selectedWithdrawType = that.ruleInfo.methods[0];
					}
				});
			},
			// 获取提现信息
			getWithdrawInfo() {
				let that = this;
				that.$http(
					'money.bankInfo', {
						type: that.withdrawType
					},
					'',
					false
				).then(res => {
					that.withdrawInfo = res.code === 1 ? res.data : null;
				});
			}
		}
	};
</script>

<style lang="scss">
	
	// 提现输入卡片
	.draw-card {
		background-color: #fff;
		border-radius: 20rpx;
		width: 690rpx;
		min-height: 550rpx;
		margin: 60rpx auto;
		padding: 30rpx;

		.card-title {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			margin-bottom: 30rpx;
		}
		.input-box {
			width: 624rpx;
			border-bottom: 1rpx solid #eee;
			height: 100rpx;
			margin-bottom: 40rpx;
			
		}
		
		.bank-box {
			.name {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}

			.bank-list {
				.empty-text {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}

				.sel-box {
					.item-img {
						width: 36rpx;
						height: 36rpx;
					}

					.item-title {
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
		}

		.bank-info {
			height: 50rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;

			.bank-info-title {
				width: 500rpx;
			}

			.bind-btn {
				padding: 0 20rpx;
				line-height: 50rpx;
				background: #f5f6f8;
				border-radius: 20rpx;
				color: #999;
			}
		}

		.save-btn {
			width: 616rpx;
			height: 86rpx;
			line-height: 86rpx;
			background: linear-gradient(-90deg, #a36fff, #5336ff);
			box-shadow: 0px 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
			border-radius: 43rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #ffffff;
		}
	}

	.unit {
		font-size:60rpx!important;
		font-weight: 400;
		color: #333333;
	}
	.withdraw-tip text:first-child{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}
	.withdraw-tip text:last-child{
		font-size: 24rpx;
		font-weight: 400;
		color: #FC5351;
		margin-left: 40rpx;
	}
	.button{
		margin-top: 40rpx;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #FC5351;
		border-radius: 44rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
</style>
